<style lang="less" scoped>
  @import "../assets/css/config.less";
.demo-auto-complete-item {
  padding: 4px 0;
  border-bottom: 1px solid #f6f6f6;
}
.demo-auto-complete-group {
  font-size: 12px;
  padding: 4px 6px;
}
.demo-auto-complete-group span {
  color: #666;
  font-weight: bold;
  float: left;
}
.demo-auto-complete-group a {
  float: right;
}
.demo-auto-complete-count {
  float: right;
  color: #999;
}
.demo-auto-complete-more {
  display: block;
  margin: 0 auto;
  padding: 4px;
  text-align: center;
  font-size: 12px;
}

.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.title {
  text-align: left;
  width: 100%;
  font-size: 17px;
}

.sub {
  width: 30%;
}

.flags {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 15px;
}
.myEcharts {
  /*background-color: white;*/
  margin-top: 20px;
}
.ivu-btn {
  margin-bottom: 4px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
  font-weight: bold;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 51%;
}
.el-dropdown-link {
  cursor: pointer;
  color: @color2;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.process-dropdown {
  font-weight: 550;
  font-size: 14px;
}
.select{
  width:100%;
  display: flex;
  justify-content: space-between;
  padding:  30px 10% 5px 10%;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
.button{
  line-height: 36px;
  background-color: @color2;
  margin: 0 10px 0;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  width: 80px;
  // letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
}
.button:hover{
  background-color: @color2;
}
.button:active{
  background-color: @color3;
}
</style>
<style lang="less">
  @import "../assets/css/config.less";
  #data_analyse .el-input--suffix .el-input__inner{
    height: 36px !important;
  }
  #data_analyse .el-tabs__item.is-active{
    color: @color2!important; 
  }

  #data_analyse .el-tabs__item:hover{
    color: @color2!important;
  }
  #data_analyse .el-tabs__active-bar{
    background-color: @color2!important;
  }

</style>
<template>
  <div id="data_analyse">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout :style="{ padding: '0px 24px 24px','background-color': 'white', 'min-width': '1210px' }">
        <div style="padding: 15px 0">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div v-if="activeName!=='fifth'" class="flags">
          <el-select v-model="flags" filterable multiple placeholder="请选择">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-option-group>
          </el-select>
          <button class="button" @click="appoint" style="margin-left: 20px;margin-top: -3px;">点击查询</button>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学习进度" name="first">
            <div>
              <span class="process-dropdown">请选择课程：</span>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{prcess_lesson}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="JavaScript">JavaScript</el-dropdown-item>
                  <el-dropdown-item command="微信小程序">微信小程序</el-dropdown-item>
                  <el-dropdown-item command="移动互联网">移动互联网</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="myEcharts">
              <line-chart :chartData="linedata"></line-chart>
            </div>
          </el-tab-pane>
          <el-tab-pane label="做题统计" name="second">
            <!--<div class="title">-->
            <!--<div class="sub">-->
            <!--<div style="margin-top: 20px">-->
            <!--点击-->
            <!--<a :href="downloadExcel">这里</a> 下载Excel模版-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <el-table
              :default-sort="{prop: 'right_percent', order: 'ascending'}"
              :data="list"
              style="width: 85%;border-radius: 10px;margin-bottom: 20px;margin:0 auto;"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="题型:">
                      <span v-if="props.row.type==='panduan'">判断</span>
                      <span v-if="props.row.type==='xuanze'">选择</span>
                      <span v-if="props.row.type==='jianda'">简答</span>
                    </el-form-item>
                    <el-form-item v-if="props.row.type==='xuanze'" label="选项:">
                      <div v-for="(v,k) in props.row.items" :key="k">
                        <span v-if="k === 0">A</span>
                        <span v-if="k === 1">B</span>
                        <span v-if="k === 2">C</span>
                        <span v-if="k === 3">D</span>
                        <span v-if="k === 4">E</span>
                        <span v-if="k === 5">F</span>
                        <span v-if="k === 6">G</span>
                        <span v-if="k === 7">H</span>
                        <span v-if="k === 8">I</span>
                        <span v-if="k === 9">J</span>
                        <span>{{ v }}</span>
                        <br />
                      </div>
                    </el-form-item>
                    <el-form-item label="答案:">
                      <span v-if="props.row.type==='panduan'&& props.row.level ==='基本题'">
                        <span v-if="props.row.answer ==='yes'">正确</span>
                        <span v-if="props.row.answer ==='no'">错误</span>
                      </span>
                      <span v-if="props.row.type==='panduan'&& props.row.level ==='提高题'">
                        <span v-if="props.row.answer.join('') ==='yes'">正确</span>
                        <span v-if="props.row.answer.join('') ==='no'">错误</span>
                      </span>
                      <span v-if="props.row.type==='jianda'">
                        <span>言之有理即可</span>
                      </span>
                      <template v-if="props.row.type==='xuanze'" v-for="(v,k) in props.row.answer">
                        <span v-if="k!==0">、</span>
                        <span v-if="v === '1'">A</span>
                        <span v-if="v === '2'">B</span>
                        <span v-if="v === '3'">C</span>
                        <span v-if="v === '4'">D</span>
                        <span v-if="v === '5'">E</span>
                        <span v-if="v === '6'">F</span>
                        <span v-if="v === '7'">G</span>
                        <span v-if="v === '8'">H</span>
                        <span v-if="v === '9'">I</span>
                        <span v-if="v === '10'">J</span>
                      </template>
                    </el-form-item>
                    <el-form-item v-if="props.row.type!=='jianda'" label="解析:" style="width:100%">
                      <span v-html=" props.row.illustrationContent "></span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <template v-for="(item,index) in columns">
                <el-table-column align="center" :label="item.title" min-width="5%">
                  <template slot-scope="scope">
                    <div style="display:inline" v-html="scope.row[item.key]"></div>

                    <div
                      style="display:inline"
                      v-if="item.key==='bloom'&&scope.row[item.key]===1"
                    >级：记忆</div>
                    <div
                      style="display:inline"
                      v-if="item.key==='bloom'&&scope.row[item.key]===2"
                    >级：理解</div>
                    <div
                      style="display:inline"
                      v-if="item.key==='bloom'&&scope.row[item.key]===3"
                    >级：应用</div>
                    <div
                      style="display:inline"
                      v-if="item.key==='bloom'&&scope.row[item.key]===4"
                    >级：分析</div>
                    <div
                      style="display:inline"
                      v-if="item.key==='bloom'&&scope.row[item.key]===5"
                    >级：综合</div>
                    <div
                      style="display:inline"
                      v-if="item.key==='bloom'&&scope.row[item.key]===6"
                    >级：评价和创造</div>
                  </template>
                </el-table-column>
              </template>
              <el-table-column
                align="center"
                label="正确率"
                sortable
                prop="right_percent"
                min-width="5%"
              >
                <template slot-scope="scope">{{ parseFloat(scope.row.right_percent.toFixed(2)) }}%</template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="助教工作" name="third">
            <el-table
              :data="list1"
              style="width: 85%;border-radius: 10px;margin:0 auto;"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <template v-for="(item,index) in columns1">
                <el-table-column
                  v-if="item.key==='job_percent'"
                  align="center"
                  :label="item.title"
                  prop
                  min-width="5%"
                >
                  <template slot-scope="scope">{{ parseFloat(scope.row[item.key].toFixed(2)) }}%</template>
                </el-table-column>
                <el-table-column v-else align="center" :label="item.title" prop min-width="5%">
                  <template slot-scope="scope">{{ scope.row[item.key] }}</template>
                </el-table-column>
              </template>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="在线编程" name="fourth">
            <el-table
              :data="coding_list"
              style="width: 85%;border-radius: 10px;margin:0 auto;"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <template v-for="(item,index) in coding_columns">
                <el-table-column align="center" :label="item.title" min-width="5%">
                  <template slot-scope="scope">
                    <div v-html="scope.row[item.key]"></div>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="日访问量" name="fifth">
            
            <div class="select">
              <div>
                <el-select v-model="kind" placeholder="按教程页面浏览统计">
                  <el-option
                    v-for="item in pages"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span>
                  <el-date-picker  value-format="timestamp" v-model="find_month" type="month" placeholder="请选择" style="margin-left:20px;"></el-date-picker>
                </span>
              </div>
              <button class="button" style="line-height:30px;width: 120px" @click="month_data">按时间查询</button>
            </div>
            <div class="myEcharts" v-if="activeName==='fifth'">
              <line-chart2 style="width:80%" :chartData="linedata2"></line-chart2>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日访问名单" name="sixth">
            <div>
              <el-date-picker
                v-model="queryDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <button class="button" style="line-height:30px;width: 120px" @click="queryPerson">查询</button>

              <el-table
              :data="everyDaylist"
              style="width: 85%;border-radius: 10px;margin:0 auto;"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <template v-for="(item,index) in person_columns">
                <el-table-column align="center" :label="item.title" min-width="5%">
                  <template slot-scope="scope">
                    <div v-html="scope.row[item.key]"></div>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import lineChart from "../components/lineChart.vue";
import lineChart2 from "../components/lineChart2.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import {
  getAllRecord,
  getAllProcess,
  getAllAssistantsWork,
  codingAnalysis,
  getCodeNumbyDay,
  getLearnNumbyDay,
  getWorkNumbyDay,
  getQuesNumbyDay,
  studentListInDay
} from "../api/api";

//var uploadURL = "";
var downloadURL = "";
if (process.env.NODE_ENV === "development") {
  downloadURL = "http://localhost:8080/api/getExcel";
} else if (process.env.NODE_ENV === "production") {
  downloadURL = "https://www.ourspark.org/api/getExcel";
}
export default {
  name: "analyse",
  data: function() {
    return {
      options: [
        {
          label: "身份标签",
          options: [
            {
              value: "0",
              label: "学生"
            },
            {
              value: "1",
              label: "管理员"
            },
            {
              value: "2",
              label: "助教"
            },
            {
              value: "3",
              label: "老师"
            }
          ]
        },
        {
          label: "学年",
          options: [
            {
              value: "4",
              label:
                new Date().getFullYear() -
                2 +
                "--" +
                (new Date().getFullYear() - 1)
            },
            {
              value: "5",
              label:
                new Date().getFullYear() - 1 + "--" + new Date().getFullYear()
            },
            {
              value: "6",
              label:
                new Date().getFullYear() + "--" + (new Date().getFullYear() + 1)
            }
          ]
        },
        {
          label: "课程",
          options: [
            {
              value: "7",
              label: "导论课"
            },
            {
              value: "8",
              label: "本科创新创业选修课"
            },
            {
              value: "9",
              label: "研究生创新创业课"
            },
            {
              value: "10",
              label: "移动互联网创意与创业课"
            },
            {
              value: "13",
              label: "内师大科技创新实践"
            }
          ]
        },
        {
          label: "组别",
          options: [
            {
              value: "11",
              label: "做题组"
            },
            {
              value: "12",
              label: "非做题组"
            }
          ]
        }
      ],
      flags: [],
      activeName: "first",
      downloadExcel: downloadURL,
      list: [],
      list1: [],
      coding_list: [],
      coding_columns: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "章节",
          key: "menu"
        },
        {
          title: "题目",
          key: "point"
        },
        {
          title: "提交次数",
          key: "submit_num"
        },
        {
          title: "总花费时间 / 分钟",
          key: "total_time"
        },
        {
          title: "最大卡顿时间 / 分钟",
          key: "topInterval"
        }
      ],
      person_columns: [
        {
          title: "学号",
          key: "stuNo"
        },
        {
          title: "姓名",
          key: "realName"
        },
        {
          title: "用户名",
          key: "username"
        },
        {
          title: "学校",
          key: "school"
        },
        {
          title: "邮箱",
          key: "email"
        }
      ],
      columns: [
        {
          title: "类别",
          key: "level"
        },
        {
          title: "问题描述",
          key: "question"
        },
        {
          title: "bloom层级",
          key: "bloom"
        },
        {
          title: "问答数",
          key: "answer_number"
        },
        {
          title: "正确回答数",
          key: "right_answer_number"
        }
      ],
      columns1: [
        // {
        //   title: "uuid",
        //   key: "UUID"
        // },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "被分配的题目数",
          key: "job_number"
        },
        {
          title: "已完成题目数",
          key: "job_done_number"
        },
        {
          title: "任务完成度",
          key: "job_percent"
        },
        {
          title: "发帖数",
          key: "post_number"
        }
      ],
      linedata: {
        title: "整体学习进度",
        data: []
      },
      linedata2: {
        month: 0,
        title: "",
        data: []
      },
      processData: {},
      prcess_lesson: "JavaScript",
      this_month: "",
      kind: "course",
      find_month: "",
      pages: [
        {
          value: "course",
          label: "按教程页面统计"
        },
        {
          value: "question",
          label: "按做题页面统计"
        },
        {
          value: "coding",
          label: "按在线编程页面统计"
        },
        {
          value: "homework",
          label: "按作业页面统计"
        }
      ],
      time: [],
      breadcrumbList: [
        {
          name: "首页",
          blod: true,
          to: "index",
        },
        {
          name: "数据分析",
        },
      ],
      queryDate: new Date,
      everyDaylist: []
    };
  },
  mounted() {
    this.find_month = +new Date()
  },
  components: {
    myheader: header,
    lineChart: lineChart,
    lineChart2: lineChart2,
    "my-breadcrumb": myBreadcrumb,
  },
  methods: {
    queryPerson(){
      console.log(this.queryDate)
      studentListInDay({
        date: this.queryDate
      }).then(res => {
        if(res.state===true){
          this.everyDaylist = res.results
        } else {
          this.$Message.error(res.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    month_data() {
      if(this.kind==="coding"){
        this.linedata2.title = "每日在线编程情况统计"
        getCodeNumbyDay({ time: this.find_month })
        .then(response => {
          if(response.state===true){
            this.linedata2.month = response.month
            this.linedata2.data = response.numByDay
          }else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
      } else if(this.kind==="course"){
        this.linedata2.title = "每日浏览教程情况统计"
        getLearnNumbyDay({ time: this.find_month })
        .then(response => {
          if(response.state===true){
            this.linedata2.month = response.month
            this.linedata2.data = response.numByDay
          }else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
      } else if(this.kind==="question"){
        this.linedata2.title = "每日做题情况统计"
        getQuesNumbyDay({ time: this.find_month })
        .then(response => {
          if(response.state===true){
            this.linedata2.month = response.month
            this.linedata2.data = response.numByDay
          }else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
      } else if(this.kind==="homework"){
        this.linedata2.title = "每日完成作业情况统计"
        getWorkNumbyDay({ time: this.find_month })
        .then(response => {
          if(response.state===true){
            this.linedata2.month = response.month
            this.linedata2.data = response.numByDay
          }else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
      }
    },
    handleCommand(lesson) {
      this.prcess_lesson = lesson;
      if (this.prcess_lesson === "JavaScript") {
        this.linedata.data = this.processData.js;
      } else if (this.prcess_lesson === "微信小程序") {
        this.linedata.data = this.processData.wx;
      } else {
        this.linedata.data = this.processData.ydhlw;
      }
    },
    handleClick(tab, event) {
      if(tab.index==="4"&&this.linedata2.data.length===0){
        this.month_data()
      }
    },
    appoint() {
      if (this.flags.length === 0) {
        this.$Modal.error({
          title: "错误！",
          content: "标签不能为空！"
        });
      } else {
        getAllProcess({
          flags: this.flags
          //          flags: ['aaa','bbb'],
        })
          .then(response => {
            if (response.state === true) {
              // this.linedata.data = response.data;
              this.processData.js = response.js;
              this.processData.wx = response.wx;
              this.processData.ydhlw = response.ydhlw;
              if (this.prcess_lesson === "JavaScript") {
                this.linedata.data = this.processData.js;
              } else if (this.prcess_lesson === "微信小程序") {
                this.linedata.data = this.processData.wx;
              } else {
                this.linedata.data = this.processData.ydhlw;
              }
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
        getAllRecord({
          flags: this.flags
          //            flags: ['aaa','bbb'],
        })
          .then(response => {
            //错题记录
            if (response.state === true) {
              this.list = response.excercise_list;
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
        getAllAssistantsWork({
          flags: this.flags
          //              flags: ['aaa','bbb'],
        })
          .then(response => {
            //助教
            if (response.state === true) {
              this.list1 = response.data;
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
        codingAnalysis({
          flags: this.flags
          //              flags: ['aaa','bbb'],
        })
          .then(response => {
            //在线编程
            if (response.state === true) {
              this.coding_list = response.data;
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      }
    }
  }
};
</script>